用 toDoList 淺談原生 JS、Vue、React 寫法

<p>
 <input type="text" id="input" /><!-- 這邊加入id屬性是為了之後使用js方便選取該元素-->
 <button id="add">add</button><!-- 這邊加入id屬性是為了之後使用js方便選取該元素-->
</p>
<ul id="ul"><!-- 這邊加入id屬性是為了之後使用js方便選取該元素-->
<!-- 這邊的li僅先繪製出來，等等在javascript邏輯部分要渲染的html結構與這裡會有關係 -->
 <li id="li" style="margin: 10px; text-decoration: line-through">
  <input type="checkbox" />測試<button style="margin: 10px">
   delete
  </button>
 </li>
</ul>

const getAddElement = document.getElementById("add");
const getInputElement = document.getElementById("input");
const getUlElement = document.getElementById("ul");

let listArray = [];
getAddElement.addEventListener("click", addFunction);
  function addFunction() {
    let item = {
    date: Date.now(),//這邊暫時使用Date.now()來當作UUID
    content: getInputElement.value,
    done: false,
  };
listArray.push(item);
//render(listArray);等等將會有一個render function
}

function render(listTodo) {
  getUlElement.innerHTML = "";
  var string = "";
  listTodo.forEach(function (item) {
    //這邊使用inline style在text-decoration當作是否已完成，若已完成的話將增加刪除線
    string += `
                <li style="margin: 10px; text-decoration: ${
                  item.done ? "lineThrough" : "none"
                };" data-id=${item.date}><input type="checkbox"
                ${item.done ? "checked" : ""}
                />
                  ${item.content}
                  <button style="margin: 10px">
                    delete
                  </button>
                </li>`;
  });
  getUlElement.innerHTML = string;
}

/*刪除事件將會監聽刪除按鈕，
  之後得到刪除按鈕的id後，
  比對原本的listArray裡面的資料，
  將不是點擊刪除按鈕的資料留下來，
  (換句話說就是留下沒被點刪除的資料，
  因為你點刪除資料當然就不見了阿XD)
*/
getUlElement.addEventListener("click", deleteFunction);
function deleteFunction(e) {
  if (e.target.nodeName === "BUTTON") {
    let thisLi = e.target.parentNode;
    let date = thisLi.dataset.id;
    listArray = listArray.filter(function (el) {
      return el.date.toString() !== date;
    });
    render(listArray);//最後重新渲染listArray的資料
  }
}

/*監聽已完成checkbox，
 點擊後藉由得到dataset的id比對listArray當中的資料，
 將原本done改成true或false
*/
getUlElement.addEventListener("change", completeFunction);
function completeFunction(e) {
  if (e.target.nodeName === "INPUT") {
    console.log(e.target);
    let thisLi = e.target.parentNode;
    let date = thisLi.dataset.id;
    listArray.forEach(function (el) {
      if (el.date.toString() == date) {
        el.done = !el.done;
      }
    });
    console.log(listArray);
    render(listArray);//最後重新渲染listArray的資料
  }
}

│  App.vue
│  main.js
│
│
└─components
        toDo.vue

<template>
  <p>
    <input type="text" v-model="input" />//透過v-model綁定使用者輸入的文字與接下來的data函式input變數的值
    <button v-on:click="addHandler">add</button>//使用v-on撰寫按鈕按下時要做的事件處理函式
  </p>
  <ul>
    <li
      v-for="item in listArray" //透過v-for遍歷data裡面的listArray
      v-bind:key="item.date"
      v-bind:style="{
        textDecoration: item.done ? 'line-through' : 'none'
      }"//對屬性動態綁定，換句話說可以撰寫data函式的變數，也能使用函式表達式的方式動態改寫屬性。
    >
      <input type="checkbox" v-on:change="changeHandler(item)" />{{
        item.content
      }}<button v-on:click="deleteHandler(item)" style="margin: 10px">
        delete
      </button>
    </li>
  </ul>
</template>

<script>
export default {
  name: "toDo",
  data() {
    return {
      listArray: [],
      input: "",
    };
  },
  methods: {
    addHandler() {
      let object = {};
      object.content = this.input;
      object.date = Date.now();
      object.done = false;
      this.listArray.push(object);
    },
    deleteHandler(item) {
      this.listArray = this.listArray.filter(function (el) {
        return el.date != item.date;
      });//透過this.xxxx用來指向data()函式裡面的變數值
    },
    changeHandler(item) {
      this.listArray.forEach(function (el) {
        if (el.date == item.date) {
          el.done = !el.done;
        }
      });
    },
  },
};
</script>
<!-- 添加scoped的屬性是表示此css僅能在此元件使用-->
<style scoped></style>

│  App.js
│  index.js
│
└─components
        Todo.js

import React, { useState } from "react";
const Todo = () => {
  return (
    <>
      <p>
        <input type="text" value={input} onChange={inputHandler}></input>
        <button onClick={addHanndler}>add</button>
      </p>
      <ul>
        {list.map((listItem) => { //渲染list的資料的內容
          return (
            <li
              style={listItem.done ? { ...margin, ...deleteLine } : margin}
              key={listItem.date}
            >
              <input
                type="checkbox"
                checked={listItem.done}
                //要帶數值進去所以要多一個callback
                onChange={() => completeHandler(listItem.date)}
              />
              {listItem.content}
              <button
                style={margin}
                onClick={() => deleteHandler(listItem.date)}
              >
                Delete
              </button>
            </li>
          );
        })}
      </ul>
    </>
  );
};
export default Todo;

const Todo = () => {
  const margin = { margin: 10 };
  const deleteLine = { textDecoration: "line-through" };
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);
  const inputHandler = (e) => {
    setInput(e.target.value);
  };
  const addHanndler = (e) => {
    const inputObject = {
      content: input,
      date: Date.now(),
      done: false,
    };
    setList([...list, inputObject]);//透過展開運算子來展開list然後再加入物件組成新陣列最後透過setList函式更改list變數。
  };
  const completeHandler = (date) => {
    const newList = list.map((el) => {
      if (el.date === date) {
        el.done = !el.done;
      }
      return el;
    });
    setList(newList);
  };
  const deleteHandler = (date) => {
    console.log(date);
    const newList = list.filter((el) => {
      return el.date !== date;
    });
    setList(newList);
  };
}
return //(以下省略)